<template>
  <div class="address">
    <div class="add_center">
      <!-- <Map
        :shopAddressList="shopAddressList"
        :shopIndex="shopIndex"
        @my-address="MyAddress"
      ></Map> -->
      <About :shopAddressList="shopAddressList" :shopIndex="shopIndex"></About>
    </div>
    <!-- 底部 -->
    <bScroll :height="height">
      <div class="add_bom">
        <div
          class="add_bom_address"
          @click="ClickMap(index)"
          v-for="(item, index) in shopAddressList"
          :key="item.id"
        >
          <div class="add_bom_address_left">
            <van-icon
              v-show="isShow == index"
              :class="`add_bom_address_left_icon `"
              size="10vw"
              color="#f18d94"
              name="map-marked"
            />
          </div>
          <div class="add_bom_address_center">
            <p class="top">{{ item.shopname }}</p>
            <div class="van-ellipsis">{{ item.address }}</div>
            <span>{{ item.distance | filterDistance }}km</span>
          </div>
          <div class="add_bom_address_right">
            <van-icon
              size="7vw"
              class="add_bom_address_right_icon"
              name="warning-o"
            />
          </div>
        </div>
        <van-contact-edit @save="onSave" />
      </div>
    </bScroll>
  </div>
</template>

<script>
import bScroll from "@/components/bScroll/bScroll.vue";
import { Dialog } from "vant";
import Map from "./Map.vue";
import About from "./About.vue";
import { GetMapShop } from "@/network/map/map.js";
export default {
  components: {
    Map,
    bScroll,
    About,
  },
  data() {
    return {
      shopAddressList: [],
      shopIndex: 99,
      myaddress: 0,
      isShow: 0,
      height:"height:94vw",
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getShopAddress();
    //console.log(this);
    this.getMyLocation()
  },
  watch: {
    shopAddressList: function () {
      this.$nextTick(() => {
        this.$children[1].scroll.refresh();
        //console.log(this)
      });
    },
  },
  methods: {
    onSave(m) {
      if (this.myaddress != 0) {
        this.myaddress.name = m.name;
        this.myaddress.tel = m.tel;
        localStorage.setItem("myaddress", JSON.stringify(this.myaddress));
        this.$router.back();
      } else {
        Dialog.alert({
          title: "注意",
          message: "请选择收货地址",
        });
      }
    },
    async getShopAddress(address) {
      const { data: res } = await GetMapShop({
        location: "112.459469,34.59281",
      });
      this.shopAddressList = res.list;
      console.log(this.shopAddressList);
    },
    MyAddress(address) {
      this.getShopAddress(address.join(","));
    },
    ClickMap(index) {
      this.isShow = index;
      console.log(index);
      this.shopIndex = index;
      this.myaddress = this.shopAddressList[index];
    },
    getMyLocation(){
      if (navigator.geolocation){
        navigator.geolocation.getCurrentPosition((v)=>{
           //this.getShopAddress(v。);
        });
      }
  },
  },
  filters: {
    filterDistance(m) {
      return (m / 1000).toFixed(2);
    },
  },
};
</script>
<style scoped lang="less">
@import "../assets/css/index.less";
/* @import url(); 引入css类 */
.active {
  visibility: hidden;
}
.add_bom_address:hover {
  background-color: rgba(19, 36, 1, 0.137);
}
.add_bom_address:hover .active {
  visibility: initial;
}
.add_bom_address {
  width: 100vw;
  height: 800 * @vh;
  display: flex;
  .add_bom_address_left {
    text-align: center;
    width: 15%;
    .add_bom_address_left_icon {
      margin-top: 120 * @vw;
    }
  }
  .add_bom_address_center {
    width: 75%;
    padding-left: 72 * @vw;
    .top {
      margin-top: 50 * @vw;
      font-size: 5vw;
    }
    .bom {
      color: #999999;
    }
    p {
    }
  }
  .add_bom_address_right {
    .add_bom_address_right_icon {
      margin-top: 170 * @vw;
    }
  }
}
</style>